<template>
  <view class="exchangeArea">
    <classifyHead title="兑换区" />
    <view class="content-container">
      <view class="content">
        <view class="mall-top">
          <image src="../../static/mall.png" mode="scaleToFill" />
          <view class="mall-right">
            <view>
              Special 轻奢复古白月光手镯女士镯子饰品外出高级感2025年欧美风
            </view>
            <view class="time">预约时间时间:2025-08-18 15:52:41 下午场</view>
          </view>
        </view>
        <view class="mall-bottom">
          <view class="count">数量:10</view>
          <view class="total">总计:<text style="color: red">5050</text></view>
          <button class="mall-btn" @click="handleMask">操作</button>
        </view>
      </view>
    </view>

    <!-- 弹窗遮罩层 -->
    <wd-overlay :show="show" @click="show = false">
      <view class="wrapper" @click.stop>
        <view class="block">
          <view class="title">选择兑换方式</view>

          <!-- 选项 1 -->
          <view class="box" @click="selectOption(0)">
            <checkBox :modelValue="selectedOption === 0" />
            <view class="text">兑换实物</view>
          </view>

          <!-- 选项 2 -->
          <view class="box" @click="selectOption(1)">
            <checkBox :modelValue="selectedOption === 1" />
            <view class="text">竞购积分:5050 (返还)</view>
          </view>

          <!-- 选项 3 -->
          <view class="box" @click="selectOption(2)">
            <checkBox :modelValue="selectedOption === 2" />
            <view class="score">
              <view class="text">获得竞购积分:2500</view>
              <view class="text">获得活动积分:5000</view>
            </view>
          </view>

          <!-- 按钮 -->
          <view class="btn">
            <button style="background: #908f8f;" @click="show = false">取消</button>
            <button style="background: #5756b3;" @click="confirm">确认</button>
          </view>
        </view>
      </view>
    </wd-overlay>
  </view>
</template>

<script setup>
import classifyHead from "@/components/classifyHead.vue";
import checkBox from "@/components/checkbox.vue";
import { ref } from "vue";

// 控制弹窗显示
const show = ref(false);

// 当前选中的选项索引，null 表示无默认选中
const selectedOption = ref(null); // 初始为 null，不选中任何项

// 打开弹窗
const handleMask = () => {
  show.value = true;
};

// 选择某个选项
const selectOption = (index) => {
  selectedOption.value = index; // 点击即选中该选项，自动取消其他
};

// 确认按钮（可添加业务逻辑）
const confirm = () => {
  console.log('用户选择了选项:', selectedOption.value);
  show.value = false;
  // 可在此添加后续逻辑，如提交兑换方式
};
</script>

<style lang="scss" scoped>
.exchangeArea {
  .content-container {
    position: relative;
    padding: 0 20rpx;
    .content {
      margin-top: 40rpx;
      box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
      width: 675rpx;
      height: 387rpx;
      border-radius: 20rpx;
      padding: 0 20rpx;
      .mall-top {
        display: flex;
        image {
          width: 238rpx;
          height: 238rpx;
          border-radius: 20rpx;
          margin-top: 20rpx;
        }
        .mall-right {
          flex: 1;
          margin-left: 20rpx;
          margin-top: 20rpx;
          color: black;
          font-weight: 500;
          .time {
            margin-top: 20rpx;
            font-size: 20rpx;
            width: 400rpx;
            color: #999;
            text-align: left;
          }
        }
      }
      .mall-bottom {
        margin-top: 20rpx;
        display: flex;
        align-items: center;
        .count {
          color: #999;
          width: 173rpx;
        }
        .total {
          width: 288rpx;
          color: #999;
        }
        .mall-btn {
          background: red;
          width: 200rpx;
          height: 60rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          color: white;
          border-radius: 0rpx;
        }
      }
    }
  }

  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 400rpx;
    height: 880rpx;
    width: 100%;
    .block {
      width: calc(100% - 60rpx);
      height: 100%;
      background-color: #fff;
      border-radius: 40rpx;
      margin: 0 20rpx;
      padding: 0 10rpx;
      .title {
        padding-top: 20rpx;
        width: 100%;
        text-align: center;
        font-size: 40rpx;
      }
      .box {
        padding: 0 40rpx;
        margin-top: 20rpx;
        width: calc(100% - 80rpx);
        height: 180rpx;
        border: 1px solid #999;
        border-radius: 30rpx;
        display: flex;
        align-items: center;
        .text {
          margin-left: 40rpx;
          font-size: 40rpx;
          padding-bottom: 10rpx;
        }
      }
      .btn {
        margin-top: 40rpx;
        display: flex;
        justify-content: space-between;
        button {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          width: 310rpx;
          height: 100rpx;
        }
      }
    }
  }
}
</style>